<template>
  <view class="main">
    <!-- 消息盒子 v-for-->
    <view
      class="notice_box"
      @click="noticeDetail(res)"
      v-for="(res, index) in noticeList"
      :key="index"
    >
      <!-- 消息标题 -->
      <view :class="res.is_read ? 'notice_title gray' : 'notice_title'">
        {{ res.title }}
      </view>
      <view class="notice_subTitle">
        <view class="notice_time">{{ res.create_time.substr(0, 10) }}</view>
        <view class="notice_type">{{ res.type_str }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/request/api.js'
import login from '@/common/login.js'
export default {
  data() {
    return {
      statusBarHeight: 0,
      titleBarHeight: 0,
      screenHeight: 0,
      page: 1,
      noticeList: [],
    }
  },
  onLoad() {
    // this.getNoticeList()
  },
  onShow() {
    this.getNoticeList()
  },

  methods: {
    /* 消息详情页 */
    noticeDetail(item) {
      item.is_read = 1
      uni.navigateTo({
        url: 'notice_detail?id=' + item.id,
      })
    },
    getNoticeList() {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) return
      api
        .getNotice({})
        .then((res) => {
          console.log('接口返回:', res)
          this.noticeList = res.data.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 刷新消息列表
    async updataList(reset) {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) {
        uni.showModal({
          title: '请登录后查看,是否立即登录',
          success: (res) => {
            console.log('res', res)
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login',
              })
            }
          },
        })
        return
      }
      if (this.noticeList.length < this.page * 10 && !reset) {
        uni.stopPullDownRefresh()
        return
      }
      if (!reset) {
        this.page++
      } else if (reset == 'reset') {
        this.page = 1
      }
      const data = {
        page: this.page,
      }
      try {
        const list = await api.getNotice(data)
        this.noticeList = reset
          ? list.data.data
          : this.noticeList.concat(list.data.data)
        this.total = list.data.total
        if (this.noticeList.length == 0) {
          this.isCollections = true
        }
        uni.stopPullDownRefresh()
      } catch (error) {
        uni.stopPullDownRefresh()
      }
    },
  },
  onReachBottom() {
    this.updataList()
  },
  onPullDownRefresh() {
    this.updataList('reset')
  },
}
</script>

<style lang="scss">
page {
  height: 100%;
}
.main {
  word-break: break-all;
  background-color: #181816;
  padding: 20rpx;

  min-height: 100vh;
  box-sizing: border-box;
}
.notice_box {
  width: 685rpx;
  margin: 0 auto 22rpx;
  display: flex;
  flex-direction: column;
  background-color: #232428;
  box-sizing: border-box;
  line-height: 100%;

  border-radius: 20rpx;
  padding: 36rpx 29rpx 36rpx 26rpx;

  .notice_title {
    width: 640rpx;
    margin-bottom: 35rpx;
    font-size: 32rpx;
    color: #fff;
    line-height: 36rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    -webkit-box-orient: vertical;
  }
  .gray {
    color: #666;
  }

  .notice_subTitle {
    display: flex;
    justify-content: space-between;
    width: 100%;

    font-size: 26rpx;
    color: #666666;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
